<template>
    <div class="course-create-or-update">
            <el-card>
      <div slot="header" class="clearfix">
        <el-steps :active="activeStep" simple>
          <el-step
            @click.native="activeStep = 0"
            title="基本信息"
            icon="el-icon-edit"
          ></el-step>
          <el-step
            @click.native="activeStep = 1"
            title="销售信息"
            icon="el-icon-upload"
          ></el-step>
          <el-step
            @click.native="activeStep = 2"
            title="秒杀活动"
            icon="el-icon-picture"
          ></el-step>
          <el-step
            @click.native="activeStep = 3"
            title="课程详情"
            icon="el-icon-picture"
          ></el-step>
        </el-steps>
      </div>
      <div v-show="activeStep === 0">
        <el-form
          :model="courseInfo"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="名称" prop="courseName">
            <el-input
              v-model="courseInfo.courseName"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="简介" prop="brief">
            <el-input
              v-model="courseInfo.brief"
              maxlength="100"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="讲师姓名" prop="teacherDTO.teacherName">
            <el-input
              v-model="courseInfo.teacherDTO.teacherName"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="职位" prop="teacherDTO.position">
            <el-input
              v-model="courseInfo.teacherDTO.position"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="课程概述" prop="teacherDTO.description">
            <el-input
              v-model="courseInfo.teacherDTO.description"
              maxlength="100"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="课程封面" prop="courseListImg">
            <image-update v-model="courseInfo.courseListImg"></image-update>
          </el-form-item>
          <el-form-item label="解锁封面" prop="courseImgUrl">
            <image-update v-model="courseInfo.courseImgUrl"></image-update>
          </el-form-item>
          <el-form-item label="课程排序" prop="sortNum">
            <el-input v-model="courseInfo.sortNum"
              ><template slot="append"
                >数字控制排序，数字越大越靠后</template
              ></el-input
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="activeStep = 1">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="activeStep === 1">
        <el-form
          :model="courseInfo"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="售卖价格" prop="discounts">
            <el-input v-model="courseInfo.discounts">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="商品原价" prop="price">
            <el-input v-model="courseInfo.price">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="销量" prop="sales">
            <el-input v-model="courseInfo.sales">
              <template slot="append">单</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="activeStep = 0">上一步</el-button>
            <el-button type="primary" @click="activeStep = 2">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="activeStep === 2">
        <el-form
          :model="courseInfo.activityCourseDTO"
          :rules="rules"
          ref="activityCourseDTO"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="限时秒杀开关">
            <el-switch
              v-model="activeCourseOpenning"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
          <template v-if="activeCourseOpenning">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="courseInfo.activityCourseDTO.beginTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="courseInfo.activityCourseDTO.endTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="秒杀价">
              <el-input
                v-model="courseInfo.activityCourseDTO.amount"
                type="number"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="秒杀库存">
              <el-input
                v-model="courseInfo.activityCourseDTO.stock"
                type="number"
              >
                <template slot="append">个</template>
              </el-input>
            </el-form-item>
          </template>
          <el-form-item>
            <el-button type="primary" @click="activeStep = 1">上一步</el-button>
            <el-button type="primary" @click="activeStep = 3">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="activeStep === 3">
        <course-editor
          v-model="courseInfo.courseDescriptionMarkDown"
        ></course-editor>
        <el-button type="primary" @click="activeStep = 2">上一步</el-button>
        <el-button type="primary" @click="createCourse">保存</el-button>
      </div>
    </el-card>
    </div>
</template>
<script lang="ts">
import Vue from 'vue'
import ImageUpdate from './image-update.vue'
import CourseEditor from './text-editor.vue'
import { saveOrUpdateCourse, SaveOrUpdateCourseType, getCourseById } from '@/apis/course'
export default Vue.extend({
  name: 'course-create-or-update',
  components: {
    ImageUpdate,
    CourseEditor
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    courseId: {
      type: [String, Number]
    }
  },
  data() {
    return {
      activeStep: 0,
      courseInfo: {
        id: null,
        courseName: '',
        // 课程简介
        brief: '',
        // 讲师信息
        teacherDTO: {
          // 讲师名称
          teacherName: '',
          description: '',
          teacherHeadPicUrl: '',
          // 讲师职位
          position: '',
          courseId: null,
          id: null
        },
        // 原价
        price: 0,
        // 优惠价
        discounts: 0,
        // 销量
        sales: 0,
        // 是否做秒杀活动
        activityCourse: false,
        // 活动课程信息
        activityCourseDTO: {
          id: null,
          // 课程ID
          courseId: null,
          // 活动开始时间
          beginTime: '',
          // 活动结束时间
          endTime: '',
          // 活动价格
          amount: 0,
          // 库存量
          stock: 0
        },
        // 自动上架时间
        autoOnlineTime: '',
        // 课程排序
        sortNum: 0,
        // 课程封面
        courseListImg: '',
        // 解锁封面
        courseImgUrl: '',
        // 课程详情
        courseDescriptionMarkDown: ''
      } as SaveOrUpdateCourseType,
      rules: {
        courseName: [
          { required: true, message: '请输入课程名称', trigger: 'blur' },
          {
            min: 2,
            max: 50,
            message: '长度在 2 到 50 个字符',
            trigger: 'blur'
          }
        ],
        brief: [
          { required: true, message: '请输入课程简介', trigger: 'blur' },
          {
            min: 2,
            max: 100,
            message: '长度在 2 到 100 个字符',
            trigger: 'blur'
          }
        ],
        teacherDTO: {
          teacherName: [
            { required: true, message: '请输入讲师名称', trigger: 'blur' },
            {
              min: 2,
              max: 50,
              message: '长度在 2 到 50 个字符',
              trigger: 'blur'
            }
          ],
          position: [
            { required: true, message: '请输入讲师职位', trigger: 'blur' },
            {
              min: 2,
              max: 50,
              message: '长度在 2 到 50 个字符',
              trigger: 'blur'
            }
          ],
          description: [
            { required: true, message: '请输入讲师课程概述', trigger: 'blur' },
            {
              min: 2,
              max: 50,
              message: '长度在 2 到 100 个字符',
              trigger: 'blur'
            }
          ]
        },
        discounts: [
          { required: true, message: '请输入课程价格', trigger: 'blur' }
        ]
      },
      activeCourseOpenning: false
    }
  },
  created() {
    this.isEdit && this.loadCourse()
  },
  methods: {
    async loadCourse() {
      const { data } = await getCourseById(this.courseId)
      if (data.code === '000000') {
        this.courseInfo = data.data
        if (!this.courseInfo.activityCourseDTO) {
          this.courseInfo.activityCourseDTO = {
            id: null,
            courseId: null,
            beginTime: '',
            endTime: '',
            amount: 0,
            stock: 0
          }
        }
      }
    },
    async createCourse() {
      const { data } = await saveOrUpdateCourse(this.courseInfo)
      if (data.code === '000000') {
        this.$message.success(`${this.isEdit ? '修改' : '创建'}课程成功！`)
        this.$router.push({
          name: 'course'
        })
      }
    }
  }
})
</script>
<style lang="scss" scoped>
.course-create-or-update {
  .el-step {
    cursor: pointer;
  }
}
</style>
